<template>
  <d2-container>
    <template slot="header">批量审核</template>
    <!-- 按钮 -->
    <template>

      <!-- table -->
      <!-- id: 1,
                        assessType: "考核分类",
                        sourceSystem: "制度来源",
                        uid: "被考核人id",
                        assessPerson: "考核人",
                        projectId: "考核内容",
                        creator: "创建人",
                        createTime: "创建时间",
                        assessTime: "考核时间",
                        check: "是否审核",
                        checkPersonId: "审核人id",
                        content: "审核内容",
                        bonus: "下发奖金",
                        updated: "修改人",
                        clauseType
                        assessPersonName
                        updateTime: "修改时间" -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="orderNumber" label="日考核单号" width="100px" show-overflow-tooltip>
          <!-- <template slot-scope="scope">{{ scope.row.orderNumber }}</template> -->
        </el-table-column>
        <el-table-column prop="assessPersonName" label="被考核人"  width="100px" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="assessedName" label="考核人" width="100px"  show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="assessTime" label="考核时间" width="150px"    show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="totalScore" label="分值" width="150px"    show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="totalSubMoney" label="扣奖"  show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="考核项目 ">
          <el-popover slot-scope="scope" placement="right" width="400" trigger="click">
            <el-table height="250" :data="tableDetail">
              <el-table-column width="150" property="name" label="考核名"></el-table-column>
              <el-table-column width="100" property="money" label="扣奖"></el-table-column>
              <el-table-column width="300" property="score" label="扣分"></el-table-column>
            </el-table>
            <el-button size="mini" slot="reference" @click="findDetail(scope.row)">查看详情</el-button>
          </el-popover>
        </el-table-column>
        <el-table-column align="center" label="审核操作" >
          <template slot-scope="scope">
            <el-radio size="mini" v-model="scope.row.check" label="1">通过</el-radio>
            <el-radio size="mini" v-model="scope.row.check" label="0">不通过</el-radio>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核内容" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="scope.row.content">
            </el-input>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="toggleSelection()">取消选择</el-button>
        <el-button type="primary" @click="submitAudit()">提交<i class="el-icon-upload el-icon--right"></i
        ></el-button>
      </div>
    </template>

  </d2-container>
</template>
<style>
.block {
  float: right;
}
.inputBox {
  width: 25%;
}
.botton_souch {
  margin-left: 5%;
}
.pagecomponents {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
<script>
// import Pagination from '@/components/Pagination.vue'
export default {
  data () {
    return {
      // 搜索框
      input: '',
      editFormVisible: false, // 控制编辑页面显示与隐藏
      title: '添加',
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 5,
        total: 10
      },
      pageRequest: {
        currentPage: 1,
        limit: 5,
        assessDetail: {
          id: 0,
          assessType: '',
          sourceSystem: 0,
          uid: 0,
          assessPerson: '',
          projectId: '',
          creator: 0,
          createTime: '',
          assessTime: '',
          check: '',
          checkPersonId: 0,
          content: '',
          bonus: 0,
          updated: 0,
          updateTime: ''
        }
      },
      // table
      tableData: [],
      // 查看考核内容详情
      tableDetail: [],
      // 选中的对象
      multipleSelection: []
    }
  },
  // 注册分页组件
  components: {
    // Pagination
  },
  // 加载页面就执行的方法
  created () {
    this.getdata()
  },
  // 只有调用才执行的方法
  methods: {
    // 页面加载展示数据
    getdata () {
      this.$request({
        url: 'dailyAssess/findAlNotCheck',
        method: 'post',
        data: this.pageRequest
      }).then((res) => {
        this.tableData = res.list
        // 初始化分页组件显示总数
        this.pageparm.total = res.total
        console.log(res)
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 分页插件事件
    callFather (parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    // 查看考核内容详情
    findDetail (pojId) {
      this.$request({
        url: 'dayAssessDetail/findById',
        method: 'post',
        params: { idStr: pojId.projectId }
      }).then((res) => {
        this.tableDetail = res
        console.log(res)
      })
    },
    // 显示编辑界面
    handleEdit: function (index, row) {
      this.editFormVisible = true
      this.title = '修改'
      this.editForm.id = row.id
      this.editForm.assessType = row.assessType
      this.editForm.assessPerson = row.assessPerson
      // this.editForm.projectId = row.projectId
      this.editForm.assessTime = row.assessTime
      this.editForm.bonus = row.bonus
    },
    // 关闭编辑、增加弹出框
    closeDialog () {
      this.editFormVisible = false
    },
    // 多选方法
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    submitAudit () {
      // multipleSelection存储了勾选到的数据
      console.log(this.multipleSelection)
      this.$request({
        url: 'dailyAssess/updateAssess',
        method: 'post',
        data: this.multipleSelection
      }).then((res) => {
        console.log(res)
      })
      this.getdata()
    }
  }
}
</script>
